<script setup>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router'
import axios from 'axios';
// -----------------------------------------------
// 菜单按钮样式切换
// -----------------------------------------------
const router = useRouter()
axios.defaults.baseURL = 'http://127.0.0.1:8100/api';
let focus_btn = ref("cloud")
function menuClick(name) {
    focus_btn.value = name;
    router.push({ name: name })
}
onMounted(async () => {
    try {
        const token = localStorage.getItem('authToken');
        const response = await axios.post('/verifyToken',  { token } );
        // 在这里处理 response 数据
        console.log(response.data);
    } catch (error) {
        // 错误处理
        console.error(error);
    }
})

</script>

<template>
    <div>
        <header class="header">
            <div class="logo">
                <img src="../assets/img/index/logo.png" alt="">
                <span>|</span>
                <p>锐智CloudSync</p>
            </div>
            <img class="avatar_img" src="../assets/img/static/tmp_user.jpg">
        </header>
        <div class="main_box">
            <div class="menu_box">
                <div id="index_btn" @click="menuClick('cloud')" :class="{ 'slected_btn': focus_btn == 'cloud' }"
                    class="index_btn menu_btn">
                    <div :class="{ 'index_btn_sel': focus_btn == 'cloud' }" class="index_btn_img btn_img">
                    </div>
                    <span :style="focus_btn == 'cloud' ? 'color: #06a7ff;font-weight: 600;' : ''" class="menu_btn_text">
                        首页
                    </span>
                </div>
                <div id="download_btn" @click="menuClick('download')" :class="{ 'slected_btn': focus_btn == 'download' }"
                    class="download_btn menu_btn">
                    <div :class="{ 'download_btn_sel': focus_btn == 'download' }" class="download_btn_img btn_img"></div>
                    <span :style="focus_btn == 'download' ? 'color: #06a7ff;font-weight: 600;' : ''" class="menu_btn_text">
                        传输
                    </span>
                </div>
                <div id="crash_btn" @click="menuClick('crash')" :class="{ 'slected_btn': focus_btn == 'crash' }"
                    class="crash_btn menu_btn">
                    <div :class="{ 'crash_btn_sel': focus_btn == 'crash' }" class="crash_btn_img btn_img">
                    </div>
                    <span :style="focus_btn == 'crash' ? 'color: #06a7ff;font-weight: 600;' : ''" class="menu_btn_text">
                        回收站
                    </span>
                </div>
                <div id="user_btn" @click="menuClick('user')" :class="{ 'slected_btn': focus_btn == 'user' }"
                    class="user_btn menu_btn">
                    <div :class="{ 'user_btn_sel': focus_btn == 'user' }" class="user_btn_img btn_img">
                    </div>
                    <span :style="focus_btn == 'user' ? 'color: #06a7ff;font-weight: 600;' : ''" class="menu_btn_text">
                        用户
                    </span>
                </div>
            </div>
            <router-view></router-view>
        </div>

    </div>
</template>

<style scoped>
@import "../assets/css/main.css";
</style>